<template>
  <el-container>
    <el-main>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>归档</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 文章归档 -->
      <el-card>
        <div class="typetitle">
          <i class="el-icon-menu"></i>
          文章归档
        </div>
        <el-timeline v-for="item in form" :key="item.id">
          <el-timeline-item :timestamp="item.timestamp" placement="top">
            <el-card>
              <router-link
                :to="{ path: `/blogcontent`, query: { id: item.id } }"
              >
                <h4>更新 {{ item.title }}</h4>
                <p>{{ item.author }} 提交于 {{ item.updated_time }}</p>
              </router-link>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </el-main>
    <!-- 侧栏目录 -->
    <el-aside>
      <el-card class="aside-user box-card">
        <div class="user"></div>
        <img src="../../assets/images/user.gif" class="userimg" />
        <div>{{ this.user.username }}</div>
        <div class="maxim">E-mail:{{ this.user.email }}</div>
        <div class="maxim">{{ this.user.personality }}</div>
      </el-card>
      <el-card class="type">
        <div slot="header" class="clearfix">
          <i class="el-icon-s-management"></i>
          目录
        </div>
        <div v-for="item in form" :key="item.id">
          <router-link :to="{ path: `/blogcontent`, query: { id: item.id } }">
            <div class="item">{{ item.title }}</div>
          </router-link>
        </div>
      </el-card>
    </el-aside>
  </el-container>
</template>
<script>
export default {
  name: 'blogtype',
  data() {
    return {
      form: [],
      user: {},
    }
  },
  created() {
    this.gettype(), this.handleGetUser()
  },
  methods: {
    gettype() {
      this.$http.get('/fontarticle').then((res) => {
        this.form = res.data.result.data
      })
    },
    handleGetUser() {
      this.$http.get('/fontuser/1').then((res) => {
        console.log(res)
        this.user = res.data.result
      })
    },
  },
}
</script>

<style lang="stylus">
.el-main
  min-width:800px
.el-breadcrumb
 margin-bottom: 15px
 margin-top: 10px
.typetitle
  padding: 10px 0 15px 0
.type
 margin-top: 15px
</style>
